<!--专家 详情-->
<template>
    <section class="export-detail">
        <div class="cp-container">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
                <el-breadcrumb-item :to="{ path: '/community/expert' }">专家中心</el-breadcrumb-item>
                <el-breadcrumb-item>专家详情</el-breadcrumb-item>
            </el-breadcrumb>
            <el-row :gutter="40" class="wrapper">
                <el-col :span="18">
                    <div class="bgf pannel">
                        <div class="expert-info flex">
                            <div class="e-portrait">
                                <el-image :src="imgUrl+infoData.fileShowUrl" :fit="'cover'"></el-image>
                            </div>
                            <div class="e-i-introduce flex flex-column">
                                <div class="e-title flex flex-between">
                                    <p>
                                        <span class="title">
                                            {{infoData.expertName}}
                                        </span>
                                        <span v-for="(item, index) in infoData.cityObject" :key="item.id" class="e-area">
                                            {{index===0 ? item.label:''}}
                                        </span>
                                    </p>
                                    <share-tooltip>
                                    </share-tooltip>
                                </div>
                                <p class="adviser">
                                    {{infoData.jobDescription}}
                                </p>
                                <p class="desc">
                                    {{infoData.mySelfIntroduction}}
                                </p>
                                <div class="flex s-num">
                                    <p>
                                        服务数量
                                        <span class="num">
                                            {{infoData.serviceNum}}
                                        </span>
                                    </p>
                                    <p class="flex score">
                                        <span class="word flex flex-center">
                                            评
                                        </span>
                                        <span class="s-data flex flex-center">
                                            {{infoData.totalScore}}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="contact flex">
                            <div class="follow flex flex-center">
                                <collection :collection-source-id="infoData.id" collection-type="COMMUNITY_EXPERT" :class-id="infoData.industryId">
                                    <p slot-scope="isColl" class="flex flex-center">
                                        <i :class="`icon ${isColl.data ? 'icon-follow' : 'icon-user-tip'}`"></i>
                                        {{isColl.data ? '取消关注' : '关注TA'}}
                                    </p>
                                </collection>
                            </div>
                            <p class="flex flex-center" @click="open53Server">
                                <i class="icon icon-weixin"></i>
                                联系TA
                            </p>
                        </div>
                    </div>
                    <div class="bgf tabContent">
                        <div class="tabHead">
                            <el-tabs
                                v-model="tabActive"
                                @tab-click="handleTabClick">
                                <el-tab-pane
                                    v-for="(item) in tabList"
                                    :key="item.id"
                                    :label="item.name"
                                    :name="item.id"
                                >
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                        <div class="tabBody">
                            <div id="pane-tab1" class="detailInfo">
                                <h3 class="title t-words">{{tabList[0].name}}</h3>
                                <section v-for="(item, index) in infoData.serviceList" :key="index">
                                    <el-row class="row-info">
                                        <el-col class="col-info" :span="17">
                                            <p class="r-i-title">{{item.expertServiceName}}</p>
                                        </el-col>
                                        <el-col class="price flex flex-end" :span="7">{{item.fixedPrice || 0}}元</el-col>
                                    </el-row>
                                    <el-row class="row-info border">
                                        <el-col class="col-info" :span="24">
                                            <pre class="service-info " :class=" + expand.isOpen && item.active ? 'auto' : ''">
                                                {{item.serviceInfo}}
                                            </pre>
                                            <p class="open flex" @click="handleExpand(index)" v-if="item.serviceInfo.length>100">
                                                {{item.active ? '收起' : '展开'}}
                                                <i :class="item.active?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                                            </p>
                                        </el-col>
                                    </el-row>
                                </section>
                                <p v-if="!infoData.serviceList.length" class="none">暂无服务</p>
                            </div>
                            <div id="pane-tab2" class="detailInfo border">
                                <h3 class="title t-words">
                                    {{tabList[1].name}}
                                </h3>
                                <section v-for="(item,index) in newsList" :key="index" class="content art-wrapper flex">
                                    <div class="article-img" @click="jumpToArticle(item)">
                                        <el-image :src="imgUrl+item.fileShowUrl" :fit="'cover'"></el-image>
                                    </div>
                                    <div class="article flex flex-column">
                                        <div class="art-title flex flex-between">
                                            <span class="a-title" @click="jumpToArticle(item)">{{item.title}}</span>
                                            <time v-if="item.modifyDate">{{item.modifyDate.split(' ')[0]}}</time>
                                        </div>
                                        <div v-html="htmlStr(item.info, 100)" class="art-desc">
                                        </div>
                                        <div class="flex art-num">
                                            <p class="flex flex-center browse">{{item.browseNum}}次浏览</p>
                                            <p class="flex flex-center answer">{{item.commentNum}}条回复</p>
                                        </div>
                                    </div>
                                </section>
                                <p v-if="!newsList.length" class="none">暂无文章</p>
                                <p
                                    v-if="total/params.pageSize>params.pageNumber"
                                    class="see-more flex flex-center"
                                    @click="handleMore">
                                    查看更多
                                    <i class="el-icon-arrow-down"></i>
                                </p>
                            </div>
                            <div id="pane-tab3" class="detailInfo">
                                <h3 class="title">专家自述</h3>
                                <div class="content border pb20 e-readme">
                                    {{infoData.mySelfIntroduction}}
                                </div>
                            </div>
                            <div v-if="false" id="pane-tab4" class="detailInfo">
                                <h3 class="title">用户评论</h3>
                                <el-row class="row-info border" v-for="(item, index) in 2" :key="index">
                                    <el-col class="col-info" :span="2">
                                        <p class="portrait">456</p>
                                    </el-col>
                                    <el-col class="comment flex flex-column" :span="22">
                                        <div class="c-user flex flex-between">
                                            <span>用户名</span>
                                            <time>2020-06-03</time>
                                        </div>
                                        <div class="c-desc">描述描述</div>
                                        <div class="c-data flex flex-between">
                                            <p class="c-service">服务：服务描述服务描述服务描述</p>
                                            <div class="flex">
                                                <p class="c-item quality">质量:3.69</p>
                                                <p class="c-item quality">速度:3.69</p>
                                                <p class="c-item quality">服务:3.69</p>
                                            </div>
                                        </div>
                                        <div class="c-answer flex flex-column">
                                            <span>专家回复</span>
                                            <p>
                                                尊敬的客户您好
                                            </p>
                                        </div>
                                    </el-col>
                                </el-row>
                                <p class="see-more flex flex-center">查看更多</p>
                            </div>
                        </div>
                        <div class="tabFooter"></div>
                    </div>
                </el-col>
                <el-col v-if="serviceInfo.length" :span="6" class="bgf service-wrapper flex flex-column">
                    <div class="service">
                        <h3>选择服务</h3>
                        <div
                            v-for="(item, index) in serviceInfo"
                            :key="index"
                            class="s-type flex flex-column "
                            :class="selected.serviceIndex === index ? 'active':''"
                            @click="handleSelectType(index, item)"
                        >
                            {{FILTER_FORMATER.wordNum(item.expertServiceName+'：'+ item.serviceInfo, 17)}}
                        </div>
                    </div>
                    <div v-if="serviceModes.length" class="service">
                        <h3>选择服务方式</h3>
                        <section v-for="(item, index) in serviceModes" :key="index">
                            <div
                                v-if="item.serviceSelected"
                                class="s-type flex flex-column s-s-way"
                                :class="selected.typeIndex === index ? 'active':''"
                                @click="handleSelectType(index, item, true)"
                            >
                                <div class="flex s-way flex-between">
                                    <span>
                                        {{serviceType(item.expertServiceType)}}
                                    </span>
                                    <span class="money">
                                        &yen;{{item.fixedPrice}}元
                                    </span>
                                </div>
                                <p v-if="item.expertServiceType === 'ENTITY_DELIVER'" class="">
                                    面对面交易
                                </p>
                                <p v-else class="flex">
                                    <span v-if="item.expertServiceType === 'ONLINE_VOICE'">一对一通话</span>
                                    <span v-else>一对一面谈</span>
                                    （约{{item.duration || 0}}分钟）
                                    <span
                                        v-if="item.expertServiceType === 'OFFLINE_MEET' && item.locaitonObject.length">
                                        {{item.locaitonObject[1].label || ''}}
                                    </span>
                                </p>
                            </div>
                        </section>
                    </div>
                    <el-button v-if="serviceModes.length" type="primary" class="btn-talks" @click="jumpLink">
                        一键预约
                    </el-button>
                </el-col>
                <el-col v-else :span="6" class="bgf service-wrapper flex flex-center" style="font-size: 14px;">
                    暂无服务
                </el-col>
            </el-row>
        </div>
    </section>
</template>

<script lang="ts">
import {
    Vue,
    Component,
    State
} from 'nuxt-property-decorator'
import {expertInfo, expertServiceInfo, getNewsById} from '~/api/community/expert'
import collection from '~/components/common/collection.vue'
import {open53Server} from '~/method'
import ValidateLoginConfirm from '~/method/confirm'
import {ciipWebUrl} from '~/../config/server.url.conf'
import shareTooltip from '~/components/common/shareTooltip.vue'
@Component({
    layout: 'community',
    head () {
        const t = this as any
        return {
            title: t.infoData.expertName + '-CIIP社群中心',
            meta: [
                {hid: 'description', name: 'description', content: `${t.infoData.expertName}-${t.infoData.jobDescription}，到CIIP社群中心与我交流。`},
                {name: 'keywords', content: '经验，服务，建筑业专家'}
            ]
        }
    },
    components: {
        collection,
        shareTooltip
    },
    validate ({params}: any) {
        return /^\d+$/.test(params.id)
    },
    async asyncData ({params}: any) {
        const {data}: any = await expertInfo(params.id)
        const info: any = await expertServiceInfo(params.id)
        return {infoData: data.data || {}, serviceInfo: info.data.data || {}}
    }
})
export default class CommunityExpertDetail extends Vue {
    imgUrl: string = this.$store.state.basefile
    tabList: any = [
        {
            name: '服务',
            id: 'pane-tab1'
        },
        {
            name: '文章',
            id: 'pane-tab2'
        }, {
            name: '自述',
            id: 'pane-tab3'
        }
    ]
    tabActive: string = ''
    infoData: any = {}
    serviceInfo: any = {}
    expand: any = {
        isOpen: true,
        txt: '展开'
    }
    selected: any = {
        typeIndex: 0,
        serviceIndex: 0
    }
    serviceModes: any = {}
    newsList: any = []
    params: any = {
        pageNumber: 1,
        pageSize: 3,
        userId: ''
    }
    total: number = 0
    @State haslogin: any
    @State userinfo: any
    mounted () {
        this.getNewsList()
        this.tabActive = this.tabList[0].id
        this.handleSelectType(0, this.serviceInfo[0], false)
    }
    async getNewsList () {
        this.params.userId = this.$route.params.id
        const {data}: any = await getNewsById(this.params)
        if (data.flag) {
            this.total = data.data.totalElements
            this.newsList = [...this.newsList, ...data.data.content]
        }
    }
    handleTabClick (val: any) {
        (document.getElementById(val.name) as HTMLInputElement).scrollIntoView({behavior: 'smooth'})
    }
    validateLoginConfirm () {
        const confirm = new ValidateLoginConfirm({that: this})
        confirm.validateLoginConfirmForParams(
            '您尚未登录，登录即可预约！',
            '立即登录',
            ciipWebUrl + '/login?redirectUrl=' + window.location.href
        )
    }
    jumpLink () {
        if (!this.haslogin) {
            this.validateLoginConfirm()
        } else {
            const serviceData: any = this.serviceInfo[this.selected.serviceIndex]
            const data: any = this.serviceModes[this.selected.typeIndex]
            const url = `/community/expert/detail/${serviceData.id}/trade?st=${data.expertServiceType}&sn=${serviceData.expertServiceName}&sId=${data.id}&price=${data.fixedPrice}`
            window.open(url)
        }
    }
    open53Server () {
        /* eslint-disable no-new */
        open53Server()
    }
    handleExpand (index: any) {
        this.infoData.serviceList[index].active = !this.infoData.serviceList[index].active
        this.expand.txt = this.infoData.serviceList[index].active ? '收起' : '展开'
    }
    handleSelectType (index: number, item: any, flag: boolean) {
        if (flag) {
            this.selected.typeIndex = index
        } else {
            this.selected.serviceIndex = index
            this.serviceModes = item ? item.modeList : {}
        }
    }
    serviceType (type: string) {
        let str: string = ''
        switch (type) {
            case 'OFFLINE_MEET':
                str = '线下见面'
                break
            case 'ONLINE_VOICE':
                str = '线上语音'
                break
            case 'ENTITY_DELIVER':
                str = '实物交付'
                break
        }
        return str
    }
    handleMore () {
        if (this.total / this.params.pageNumber >= this.params.pageSize) {
            this.params.pageNumber++
            this.getNewsList()
        }
    }
    jumpToArticle (item: any) {
        window.open(`/community/article/detail/${item.id}`)
    }
    htmlStr (str: any, num: any) {
        const val = str.replace(/<\/?.+?>/g, '').replace(/(^\s+)|(\s+$)/g, '').replace(/&nbsp;/ig, '')
        let htmlVal = val || ''
        if (
            val &&
            num &&
            !isNaN(Number(num)) &&
            val.length > num
        ) {
            num = Number(num)
            htmlVal = val.substring(0, num) + '...'
        }
        return htmlVal
    }
}
</script>
<style lang="scss" scoped>
    .export-detail {
        background: #f7f7f7;
        .bgf {
            background: #fff;
        }
        .bread {
            height: 60px;
            line-height: 60px;
        }
        .pb20{
            padding-bottom: 20px;
        }
        .wrapper {
            margin-bottom: 50px;

            .pannel {
                padding: 25px 25px 0;
                border-radius: 3px;

                .expert-info {
                    .e-portrait {
                        position: relative;
                        width: 168px;
                        height: 168px;
                        .el-image{
                            height: 100%;
                            //@include imgCenter;
                        }
                    }

                    .e-i-introduce {
                        margin-left: 25px;
                        flex: 1;
                        font-size: 14px;
                        color: #666;

                        .e-title {
                            .title {
                                font-size: 24px;
                                color: #333;
                            }

                            .e-area {
                                font-size: 14px;
                                color: #999;
                            }
                        }

                        .adviser {
                            margin: 10px 0 15px;
                        }

                        .desc {
                            line-height: 1.8;
                            @include tof(2);
                        }
                        .s-num {
                            margin-top: 15px;
                            font-size: 12px;
                            color: #999;
                            align-items: center;

                            .num {
                                font-size: 16px;
                                color: #11a9e8;
                            }

                            .score {
                                margin-left: 20px;
                                min-width: 50px;
                                height: 17px;
                                color: #ffad4d;
                                font-size: 12px;
                                align-items: center;
                                border: 1px solid #ffad4d;
                                border-radius: 2px;

                                .word {
                                    width: 18px;
                                    height: 100%;
                                    background: #ffefdb;
                                    border-right: 1px solid #ffad4d;
                                }

                                .s-data {
                                    flex: 1
                                }

                            }
                        }
                    }
                }

                .contact {
                    margin-top: 25px;
                    height: 64px;
                    border-top: 1px solid #f3f5f7;
                    .icon{
                        margin-right: 10px;
                    }
                    .follow{
                        position: relative;
                        flex: 1;
                        p{
                            font-size: 16px;
                            color: #333;
                        }
                        &:after {
                            content: '';
                            position: absolute;
                            right: 0;
                            top: 50%;
                            margin-top: -20px;
                            width: 1px;
                            height: 40px;
                            border-right: 1px solid #f3f5f7;
                        }
                    }
                    p {
                        position: relative;
                        flex: 1;
                        cursor: pointer;
                    }
                }
            }
            .tabContent {
                margin-top: 20px;
                padding: 15px 20px 30px;

                .tabHead {
                    width: 100%;
                }

                .tabBody {
                    width: 100%;

                    .detailInfo {
                        &.border{
                            border-bottom: 1px solid #f3f5f7;
                        }
                        .title {
                            position: relative;
                            margin: 20px 0;
                            max-width: 82px;
                            color: #333;
                            font-size: 20px;
                            z-index: 2;
                            &.t-words{
                                max-width: 40px;
                            }
                            &:after{
                                content: '';
                                position: absolute;
                                left: -2px;
                                right: -2px;
                                bottom: 0;
                                background: #70cbf1;
                                height: 6px;
                                border-radius: 22px;
                                z-index: -1;
                            }
                        }
                        .row-info {
                            margin-bottom: 20px;
                            &.border{
                                border-bottom: 1px solid #f3f5f7;
                            }
                            .col-info {
                                color: #333;
                                font-size: 14px;
                                line-height: 14px+10;
                                .r-i-title{
                                    position: relative;
                                    padding-left: 10px;
                                    font-size: 16px;
                                    &:before{
                                        content: '';
                                        position: absolute;
                                        left: 0;
                                        top: 50%;
                                        margin-top: -7px;
                                        height: 14px;
                                        border-left: 4px solid #11a9e8;
                                        border-radius: 3px;
                                    }
                                }
                                .service-info{
                                    /*padding-bottom: 10px;*/
                                    margin-top: 0;
                                    max-height: 50px;
                                    overflow: hidden;
                                    transition: all 0.3s;
                                    word-break: break-all;
                                    white-space: pre-line;
                                    &.auto{
                                        max-height: 400px;
                                        /*height: auto;*/
                                    }
                                }
                                .open{
                                    color: #11a9e8;
                                    font-size: 12px;
                                    cursor: pointer;
                                    align-items: center;
                                }
                            }
                            .price{
                                font-size: 20px;
                                color: #ff5a5a;
                            }
                            .portrait{
                                width: 48px;
                                height: 48px;
                                border-radius: 100%;
                                background: black;
                            }
                            .comment{
                                padding-bottom: 20px;
                                color: #999;
                                font-size: 14px;
                                .c-user{
                                    span{
                                        color: #333;
                                    }
                                }
                                .c-desc{
                                    margin: 10px 0 15px;
                                    line-height: 1.8;
                                    color: #666;
                                }
                                .c-data{
                                    font-size: 12px;
                                    .c-item{
                                        margin: 0 10px;
                                    }
                                }
                                .c-answer{
                                    margin-top: 20px;
                                    padding: 20px;
                                    background: #fcfaf6;
                                    span{
                                        color: #333;
                                    }
                                    p{
                                        margin-top: 5px;
                                        line-height: 1.8;
                                        color: #666;
                                    }
                                }
                            }

                        }
                        .content {
                            width: 100%;
                            overflow: hidden;
                            &.border{
                                border-bottom: 1px solid #f3f5f7;
                            }
                            &.e-readme{
                                font-size: 14px;
                                line-height: 1.6;
                            }
                            &.art-wrapper{
                                padding: 25px;
                                margin-bottom: 20px;
                                background: #f8f8f8;
                                .article-img{
                                    width: 140px;
                                    height: 105px;
                                    cursor: pointer;
                                    .el-image{
                                        height: 100%;
                                    }
                                }
                                .article{
                                    margin-left: 25px;
                                    flex: 1;
                                    font-size: 14px;
                                    .art-title{
                                        .a-title{
                                            flex: 1;
                                            font-size: 16px;
                                            color: #333;
                                            cursor: pointer;
                                            @include tof(1);
                                        }
                                        time{
                                            color: #999;
                                            min-width: 100px;
                                        }
                                    }
                                    .art-desc{
                                        margin: 10px 0;
                                        color: #666;
                                        line-height: 1.8;
                                        min-height: 48px;
                                        @include tof(2);
                                    }
                                    .art-num{
                                        font-size: 12px;
                                        color: #999;
                                        .browse{
                                            margin-right: 40px;
                                        }
                                    }
                                }
                            }

                            .no-data {
                                color: #999;
                                font-size: 14px;
                            }

                            .tableRow {
                                width: 100%/3;

                                .tableCell {
                                    margin: -8px -10px;

                                    .cellInfo {
                                        padding: 8px 10px;

                                        &:not(:last-child) {
                                            border-bottom: 1px solid red;
                                        }
                                    }
                                }
                            }

                            a.url {
                                color: #11a9e8;
                                font-size: 14px;
                                margin-right: 20px;
                            }

                            .evaList {
                                display: block;
                                width: 100%;

                                .evaItem {
                                    width: 100%;
                                    padding-bottom: 20px;
                                    justify-content: space-between;
                                    align-items: flex-start;
                                    border-bottom: 1px solid red;

                                    &:not(:last-child) {
                                        margin-bottom: 20px;
                                    }

                                    .uhead {
                                        width: 46px;
                                        height: 46px;
                                        border-radius: 50%;
                                        overflow: hidden;
                                        margin-right: 12px;
                                        /*background-color: #d0f1f7;*/

                                        img {
                                            width: 100%;
                                            height: 100%;
                                        }
                                    }

                                    .evaContent {
                                        width: calc(100% - 58px);

                                        .evaTop {
                                            .uname {
                                                color: #333;
                                                font-size: 14px;
                                                margin-right: 40px;
                                            }

                                            .time {
                                                color: #999;
                                                font-size: 12px;
                                            }
                                        }

                                        .evaCenter {
                                            margin: 12px 0;

                                            .evaStar {
                                                margin-right: 25px;

                                                .evaTitle {
                                                    color: #333;
                                                    font-size: 14px;
                                                    margin-right: 5px;
                                                }

                                                .starList {
                                                    .star {
                                                        display: block;
                                                        width: 14px;
                                                        height: 14px;
                                                        margin: 0 5px;
                                                        /*background-image: url(/img/star.png);*/
                                                    }
                                                }
                                            }
                                        }

                                        .evaBottom {
                                            //@include tof();
                                            color: #333;
                                            font-size: 14px;
                                            text-align: justify;
                                            word-break: break-all;
                                        }
                                    }
                                }
                            }
                        }
                        .see-more{
                            margin-bottom: 20px;
                            color: #11a9e8;
                            font-size: 12px;
                            cursor: pointer;
                        }
                        .none{
                            height: 30px;
                            /*text-align: center;*/
                            color: #999;
                            font-size: 12px;
                        }
                    }
                }
            }
            .service-wrapper{
                /*position: sticky;*/
                /*top: 100px;*/
                padding: 25px;
                min-height: 280px;
                .btn-talks{
                    margin: auto;
                    width: 120px;
                    background-color: #11a9e8;
                    border-color: #11a9e8;
                }
                .service {
                    h3{
                        margin-bottom: 10px;
                    }
                    margin-bottom: 40px;
                    overflow:hidden;
                    font-size: 14px;
                    .s-type{
                        padding: 0 20px;
                        margin-top: 20px;
                        line-height: 40px;
                        color: #666;
                        border: 1px solid #dcdfe6;
                        border-radius: 4px;
                        cursor: pointer;
                        &.s-s-way{
                            padding: 10px 20px;
                            line-height: 1.8;
                        }
                        @include tof(1);
                        &.active{
                            border-color: #11a9e8;
                            color: #11a9e8;
                        }
                        p{
                            color: #999;
                        }
                        .s-way{
                            margin-bottom: 5px;
                            font-size: 20px;
                            .money{
                                color: #ff5a5a;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .export-detail{
        .el-tabs__nav-wrap::after{
            height: 1px;
        }
        .is-active{
            color: #333;
        }
        .el-tabs__active-bar{
            background: none;
        }
        .el-breadcrumb__inner.is-link:hover{
            color: #11a9e8;
        }
    }
</style>
